<!--
 * @Author: coocase
 * @Date: 2021-03-12 09:33:36
 * @LastEditTime: 2021-05-13 13:10:36
 * @LastEditors: coocase
 * @Description: 搜索列表
 * @FilePath: \git\dami\src\pages\result\result.vue
-->
<template>
  <div class="wrap bacc">
    <Layout class="bacc">
      <Content>
        <div class="title">
          共
          <span class="num">40</span>
          个商品
        </div>
      </Content>
      <Footer class="bacc">
        <Row class="bacc">
          <Col span="16">
            <Layout class="bacc">
              <Content>
                <div class="selector">
                  <Row>
                    <Col span="4" class="key">城市 ：</Col>
                    <Col span="16" class="value">
                      <a href="javascript:void(0)" class="tag">北京</a
                      ><a href="javascript:void(0)" class="tag">上海</a
                      ><a href="javascript:void(0)" class="tag">深圳</a
                      ><a href="javascript:void(0)" class="tag">广州</a>
                      <a href="javascript:void(0)" class="tag">成都</a>
                      <a href="javascript:void(0)" class="tag">西安</a>
                    </Col>
                    <Col span="4" class="ext">更多</Col>
                  </Row>
                </div>
                <div class="selector">
                  <Row>
                    <Col span="4" class="key">分类 ：</Col>
                    <Col span="16" class="value">
                      <a href="javascript:void(0)" class="tag">音乐</a
                      ><a href="javascript:void(0)" class="tag">朗诵</a
                      ><a href="javascript:void(0)" class="tag">独奏</a
                      ><a href="javascript:void(0)" class="tag">曲苑杂坛</a>
                      <a href="javascript:void(0)" class="tag">声乐及合唱</a>
                    </Col>
                    <Col span="4" class="ext">更多</Col>
                  </Row>
                </div>
                <div class="selector">
                  <Row>
                    <Col span="4" class="key">时间 ：</Col>
                    <Col span="16" class="value">
                      <a href="javascript:void(0)" class="tag">今天</a>
                      <a href="javascript:void(0)" class="tag">明天</a>
                      <DatePicker
                        type="date"
                        placeholder="Select date"
                        style="width: 150px"
                      ></DatePicker>
                      -
                      <DatePicker
                        type="date"
                        placeholder="Select date"
                        style="width: 150px"
                      ></DatePicker>
                    </Col>
                    <Col span="4" class="ext">更多</Col>
                  </Row>
                </div>
              </Content>
              <Footer class="bacc list">
                <Tabs value="hot">
                  <TabPane label="热门推荐" name="hot">
                    <result-list :results="results"></result-list>
                  </TabPane>
                  <TabPane label="最近开场" name="lasted">
                    <result-list :results="results"></result-list>
                  </TabPane>
                  <TabPane label="最新上架" name="new">
                    <result-list :results="results"></result-list>
                  </TabPane>
                </Tabs>
              </Footer>
            </Layout>
          </Col>
          <Col span="2"> </Col>
          <Col span="6">
            <result-sider></result-sider>
          </Col>
        </Row>
      </Footer>
    </Layout>
  </div>
</template>

<script>
import ResultSider from "@/components/Sider";
import ResultList from "./resultList";
export default {
  name: "Result",
  props: ["results"],
  components: {
    ResultSider,
    ResultList,
  },
  methods: {},
  // created:function () {
  //     console.log("result created");
  // },
  // beforeMount: function () {
  //         console.log("result beforeMount");

  // },
  // mounted:function () {
  //     console.log("result页面的值");
  //     console.log(this.results);
  // },
  // updated:function () {
  //     console.log("result Updated");
  //     console.log(this.results);
  // }
};
</script>

<style scoped>
.wrap {
  width: 1200px;
  margin: 0 auto;
}
.title {
  margin: 5px 50px;
  border-bottom: 1px solid #eee;
}
.bacc {
  background-color: #fff;
}
.list {
  padding: 0px;
}
.num {
  color: red;
}
.selector {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.key {
  font: bolder;
  font-size: 16px;
}
.tag {
  padding: 0px 20px;
  text-decoration: none;
  color: rgb(0, 0, 0);
}
</style>